<template>
  <div @click="route = 'hello'">toHello</div>
  <div @click="route = 'read'">toRead</div>
  <div @click="route = 'write'">toWrite</div>

  <div>
    <input v-model="query" placeholder="请输入内容" />
    <button @click="handleSearch">搜索</button>
    <ul>
      <li v-for="item in results" :key="item.title" @click="item.onClick">
        {{ item.title }}
      </li>
    </ul>
  </div>
  <template v-if="route === 'hello'">
    <Hello :enterAction="enterAction"></Hello>
  </template>
  <template v-if="route === 'read'">
    <Read :enterAction="enterAction"></Read>
  </template>
  <template v-if="route === 'write'">
    <Write :enterAction="enterAction"></Write>
  </template>
</template>

<script lang="ts" setup>
import Hello from "./Hello/index.vue";
import Read from "./Read/index.vue";
import Write from "./Write/index.vue";
import callMain from "../background/index";
const route = ref("");
const enterAction = ref({});
onMounted(() => {
  window.utools.onPluginEnter((action) => {
    route.value = action.code;
    enterAction.value = action;
  });
  window.utools.onPluginOut((isKill) => {
    route.value = "";
  });
});
const query = ref("");
const results = ref([]);
const handleSearch = async () => {
  results.value = (await callMain.main({ query: query.value }, utools)).results;
};
</script>

<style lang="less"></style>
